<template>
  <van-nav-bar
    :title="navTitle"
    :left-text="showBackButton ? '返回' : ''"
    :left-arrow="showBackButton"
    :fixed="true"
    :placeholder="true"
    safe-area-inset-top
    @click-left="handleLeftClick"
  >
    <!-- 自定义右侧内容插槽 -->
    <template #right>
      <!-- 菜单图标 -->
<!--      <van-icon-->
<!--        v-if="showMenuButton"-->
<!--        name="bars"-->
<!--        size="20"-->
<!--        @click="handleRightClick"-->
<!--        style="margin-left: 10px; color: #fff"-->
<!--      />-->
      <!-- 搜索图标 -->
      <van-icon
        v-if="showSearchIcon"
        name="search"
        size="18"
        @click="handleSearchClick"
        style="color: #fff"
      />
      <!-- 历史记录页面的清空按钮 -->
      <van-button
        v-if="showClearHistoryButton"
        type="danger"
        size="small"
        @click="handleClearHistory"
      >
        清空记录
      </van-button>
    </template>
  </van-nav-bar>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NavBar, Icon, Button, Dialog, showToast } from 'vant'
import { useHistoryStore } from '../../stores/history'

const router = useRouter()
const route = useRoute()
const historyStore = useHistoryStore()

// 响应式数据
const currentRoute = ref(route)

// 监听路由变化
watch(route, (newRoute) => {
  currentRoute.value = newRoute
}, { immediate: true })

// 计算导航栏标题
const navTitle = computed(() => {
  if (currentRoute.value.meta?.title) {
    return currentRoute.value.meta.title
  }

  const routeName = currentRoute.value.name
  const titleMap = {
    'home': '校园新闻网',
    'search': '搜索',
    'user': '校园事务',
    'news-detail': '新闻详情',
    'news-list': '新闻列表',
    'login': '登录',
    'about': '关于我们'
  }
  return titleMap[routeName] || '校园新闻网'
})

// 判断是否显示返回按钮
const showBackButton = computed(() => {
  const level = currentRoute.value.meta?.level || 1
  return level > 1
})

// 判断是否显示菜单按钮
const showMenuButton = computed(() => {
  const routeName = currentRoute.value.name
  const level = currentRoute.value.meta?.level || 1
  return level === 1
})

// 判断是否显示搜索图标
const showSearchIcon = computed(() => {
  return false
})

// 判断是否显示清空历史记录按钮
const showClearHistoryButton = computed(() => {
  const routeName = currentRoute.value.name
  return routeName === 'history' && !historyStore.isEmpty
})

// 处理左侧按钮点击
const handleLeftClick = () => {
  if (showBackButton.value) {
    if (window.history.length > 1) {
      router.back()
    } else {
      router.push({ name: 'home' })
    }
  }
}

// 处理右侧按钮点击
const handleRightClick = () => {
  if (showMenuButton.value) {
    router.push('/menu')
  }
}

// 处理搜索图标点击
const handleSearchClick = () => {
  router.push({ name: 'search' })
}

// 处理清空历史记录
const handleClearHistory = () => {
  Dialog.confirm({
    title: '确认清空',
    message: '确定要清空所有浏览历史吗？此操作不可恢复。',
  }).then(() => {
    const success = historyStore.clearAllHistory()
    if (success) {
      showToast('已清空所有历史记录')
    } else {
      showToast('清空失败，请重试')
    }
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<style scoped>
/* NavBar 自定义样式 */
:deep(.van-nav-bar) {
  background: linear-gradient(to top, #A0202B 0%, #C32A31 100%);
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
  font-weight: 600;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.van-nav-bar .van-nav-bar__arrow),
:deep(.van-nav-bar .van-nav-bar__text) {
  color: white !important;
}

/* 响应式调整 */
@media (max-width: 375px) {
  :deep(.van-nav-bar__title) {
    font-size: 16px;
  }
}
</style>
